Temporary Tailwind4 migration for MotiveMarket by Turito · Pull Request #1950 · empathyco/x

Turito · 2025-12-19T09:36:00Z

Pull request template

Describe the purpose of the change, the specific changes done in detail, and the issue you have fixed.

Motivation and context

Dependencies. If any, specify:
Open issue. If applicable, link:

Type of change

Bug fix (non-breaking change that fixes an issue)
New feature (non-breaking change that adds functionality)
Breaking change (fix or feature that causes existing functionality to not work as expected)
Change requires a documentation update

What is the destination branch of this PR?

Main
Other. Specify:

How has this been tested?

Tests performed according to testing guidelines:

Checklist:

My code follows the style guidelines of this project.
I have performed a self-review on my own code.
I have commented my code, particularly in hard-to-understand areas.
I have made corresponding changes to the documentation.
My changes generate no new warnings.
I have added tests that prove my fix is effective or that my feature works.
New and existing unit tests pass locally with my changes.

victorcg88 · 2025-12-19T09:47:54Z

packages/x-components/src/components/page-loader-button.vue

+          <span class="text-accent-50 font-bold">{{ resultsLength }}</span>
          <span>of</span>
-          <span class="x-text-accent-50">{{ totalResults }}</span>
+          <span class="text-accent-50">{{ totalResults }}</span>


text-accent is from the x-tailwindcss should keep be with x-, right? same for x-font-bold etc etc

Yes but not. Both classes are generated from x-tailwindcss but they are from tailwind.
font-bold: https://tailwindcss.com/docs/font-weight
text-{color}-{tone}: https://tailwindcss.com/docs/color

victorcg88

Great job Fran!!!

victorcg88 · 2025-12-19T09:53:38Z

packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/colors.ts

-          color: shadeColor,
-        })),
-        { prefix: '&-' },
+  return mapColorsFlat((color, colorName) => {


Suggested change

return mapColorsFlat((color, colorName) => {

return mapColors((color, colorName) => {

victorcg88 · 2025-12-19T09:54:19Z

packages/x-tailwindcss/src/x-tailwind-plugin/utils/map-colors.ts

  )
 }
+
+export function mapColorsFlat<T extends CssStyleOptions>(


Suggested change

export function mapColorsFlat<T extends CssStyleOptions>(

export function mapColors<T extends CssStyleOptions>(

I would like to know why two different functions mapColors and mapColorsFlat are needed for the migration

victorcg88 · 2025-12-19T09:54:54Z

packages/x-tailwindcss/src/x-tailwind-plugin/components.ts

+export interface CSSRuleObject {
+  [selector: string]: CSSRuleValue | string | number | undefined
+}


Suggested change

export interface CSSRuleObject {

[selector: string]: CSSRuleValue | string | number | undefined

}

This should be in the type.ts right?

victorcg88 · 2025-12-19T09:56:51Z

packages/x-components/src/tailwind/index.css

+@config './tailwind.config.ts';
+
+@plugin "@empathyco/x-tailwindcss/plugin";
+@plugin "@empathyco/x-tailwindcss/old-ds-plugin";


We should get rid of this:

Suggested change

@plugin "@empathyco/x-tailwindcss/old-ds-plugin";

Could we remove this? If something is needed (Variables or whatever), move it where necessary. x-components or x-tailwind-plugin.

AdrianArenal · 2026-01-13T10:32:42Z

packages/x-components/CHANGELOG.md

I won't change the CHANGELOG to know what we have in the past

AdrianArenal · 2026-01-13T10:46:32Z

packages/x-tailwindcss/tsconfig.json

    "moduleResolution": "node",
-    "types": ["tailwindcss"],
+    "paths": {
+      "tailwindcss/plugin": ["./node_modules/tailwindcss/dist/plugin.d.mts"]


Can we explain this change ?

AdrianArenal · 2026-01-13T11:14:57Z

packages/x-tailwindcss/package.json

    "@rollup/plugin-commonjs": "29.0.0",
+    "@tailwindcss/postcss": "4.1.17",
+    "@tailwindcss/vite": "4.1.17",
+    "@types/tailwindcss": "^3.1.0",


Suggested change

"@types/tailwindcss": "^3.1.0",

"@types/tailwindcss": "3.1.0",

joseacabaneros · 2026-01-13T11:36:28Z

packages/x-components/vite.config.ts

+    vueDocsPlugin,
+    Inspector(),
+    tailwindcss({
+      config: resolve(__dirname, './tailwind.config.ts'),


This file was moved to src/tailwind/tailwind.config.ts right?

victorcg88 · 2026-01-13T12:51:21Z

packages/x-tailwindcss/demo/src/css/index.css

@@ -0,0 +1,4 @@
+@import 'tailwindcss';


Suggested change

@import 'tailwindcss';

@import 'tailwindcss' prefix(xds);

This tailwind demo is not only for showcase. It is also a development tool for setups. Usually, a developer runs this project, chooses a styling to apply, and copies the whole bunch of classes. There is a feature to copy styles from the demo.

With this prefix change, this feature becomes useless, as we would need to add the prefix manually again, which will be the case for 99.9999% of the cases.

victorcg88 · 2026-01-13T12:55:41Z

packages/x-components/src/tailwind/index.css

+@config './tailwind.config.ts';
+
+@plugin "@empathyco/x-tailwindcss/plugin";
+@plugin "@empathyco/x-tailwindcss/old-ds-plugin";


Could we remove this? If something is needed (Variables or whatever), move it where necessary. x-components or x-tailwind-plugin.

victorcg88 · 2026-01-13T12:57:11Z

packages/x-tailwindcss/src/x-tailwind-plugin/components/badge/index.ts

+        ...badgeBright(helpers),
+      },
+      {
+        prefix: '.x-badge-',


Suggested change

prefix: '.x-badge-',

prefix: '.badge-',

Shouldn't be like that?

victorcg88 · 2026-01-13T12:59:17Z

packages/x-tailwindcss/src/x-tailwind-plugin/components/input/index.ts

        },
        {
-          prefix: '&-',
+          prefix: '&.input-',


Suggested change

prefix: '&.input-',

prefix: '.input-',

Right?

victorcg88 · 2026-01-13T13:01:31Z

packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/text1/index.ts

+      {
+        ...textSizes(helpers),
+      },
+      { prefix: '&.text1-' },


Is this correct?

victorcg88 · 2026-01-13T13:01:50Z

packages/x-tailwindcss/src/x-tailwind-plugin/components/typography/text2/index.ts

+      {
+        ...textSizes(helpers),
+      },
+      { prefix: '&.text2-' },


Is this correct?

joseacabaneros · 2026-01-13T12:17:45Z

packages/x-tailwindcss/src/x-tailwind-plugin/components/layout/index.ts

-      { prefix: '&-' },
+      { prefix: '.layout-' },
    ),
+    ...minMargin(helpers),


Why minMargin and maxWidth now are out of rename?

joseacabaneros · 2026-01-13T12:20:00Z

packages/x-tailwindcss/src/x-tailwind-plugin/utils/map-colors.ts

  )
 }
+
+export function mapColorsFlat<T extends CssStyleOptions>(


I would like to know why two different functions mapColors and mapColorsFlat are needed for the migration

joseacabaneros · 2026-01-13T12:24:42Z

packages/x-tailwindcss/src/x-tailwind-plugin/plugin.ts

  },
 )
+
+const xTailwindPlugin: unknown = _xTailwindPlugin


Why export something unknown?

joseacabaneros · 2026-01-13T12:27:18Z

packages/x-tailwindcss/package.json

-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/types/index.d.ts",
+  "exports": {


Why does the export process now have to be done this way?

joseacabaneros · 2026-01-13T12:42:09Z

packages/x-tailwindcss/demo/src/css/index.css

@@ -0,0 +1,4 @@
+@import 'tailwindcss';
+
+@plugin "../../../src/x-tailwind-plugin/plugin";


Remains tailwind.config.ts in the demo root with plugins: [xTailwindCss],. Are both needed?

joseacabaneros · 2026-01-13T12:47:10Z

packages/x-components/src/components/modals/base-events-modal-close.vue

  <BaseEventButton
    :events="events"
-    class="x-events-modal-close-button x-button"
+    class="x-events-modal-close-button xds:button"


Using both prefix x and xds is something that drives me crazy 😅
I know the reason behind but I don't like the result mix

joseacabaneros · 2026-01-13T12:48:13Z

packages/x-components/src/views/home/aside.vue


    <!-- Facets -->
-    <Facets class="x-gap-24">
+    <Facets class="gap-24">


Should this be xds: prefixed?

joseacabaneros · 2026-01-13T12:52:56Z

packages/x-tailwindcss/demo/src/css/index.css

@@ -0,0 +1,4 @@
+@import 'tailwindcss';


I think I would prefix the demo too to make it more realistic since supposedly it will to be the way we will use the XDS in consumers

joseacabaneros · 2026-01-13T13:01:52Z

packages/x-tailwindcss/src/types.ts

- * @public
+ * The helpers provided internally by our Tailwind plugin.
+ * Tailwind CSS 4 no longer exposes `PluginAPI`,
+ * so we recreate the pieces we need.


This comment explains very well that we're giving Tailwind 3 a facelift to make it look like Tailwind 4. From my point of view, it's not really a migration.

# Conflicts: # packages/x-components/package.json # packages/x-tailwindcss/package.json # pnpm-lock.yaml

Turito added 10 commits December 18, 2025 11:15

chore: update dependencies

a39f55e

feat: refactor components and styles for Tailwind migration

b666693

feat(x-tailwindcss): update TypeScript configuration

b6ad97a

feat(x-components): integrate x-tailwindcss

b4a626b

feat(x-components): remove prefix in common Tailwind classes

2c53a22

feat: refactor components and styles for Tailwind migration

a912f33

feat: recover old plugin

07e8921

fix(x-components): remove prefix in common Tailwind classes

a37b83f

ci: exclude Tailwind config from Rollup build

934061a

ci: format

263c00e

Turito marked this pull request as ready for review December 19, 2025 09:36

Turito requested a review from a team as a code owner December 19, 2025 09:36

victorcg88 reviewed Dec 19, 2025

View reviewed changes

Turito added 4 commits January 9, 2026 12:49

feat(x-tailwindcss): remove prefix x-

4f410a3

feat(x-tailwindcss): remove prefix x- from demo

dc2d25a

feat(x-tailwindcss): remove prefix x-

c736341

feat(x-components): update prefix to xds

07a1e4c

Turito force-pushed the feat/migrate-tailwind branch from 1c5747f to 07a1e4c Compare January 12, 2026 17:19

AdrianArenal reviewed Jan 13, 2026

View reviewed changes

packages/x-components/CHANGELOG.md

Copy link

Contributor

AdrianArenal Jan 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I won't change the CHANGELOG to know what we have in the past

AdrianArenal reviewed Jan 13, 2026

View reviewed changes

joseacabaneros reviewed Jan 13, 2026

View reviewed changes

victorcg88 requested changes Jan 13, 2026

View reviewed changes

victorcg88 reviewed Jan 13, 2026

View reviewed changes

joseacabaneros reviewed Jan 13, 2026

View reviewed changes

AdrianArenal added 2 commits January 13, 2026 16:21

chore: update workflows and improve release tagging logic

460ba77

Merge remote-tracking branch 'origin/main' into feat/migrate-tailwind

d01a805

# Conflicts: # packages/x-components/package.json # packages/x-tailwindcss/package.json # pnpm-lock.yaml

AdrianArenal force-pushed the feat/migrate-tailwind branch from 438933c to dd29ddb Compare January 13, 2026 15:39

chore: update pnpm-lock.yaml with dependency and version updates

4fb3dbe

AdrianArenal force-pushed the feat/migrate-tailwind branch from dd29ddb to 4fb3dbe Compare January 13, 2026 15:42

AdrianArenal and others added 4 commits January 13, 2026 16:44

chore: trigger release workflow on push to feat/migrate-tailwind branch

330486c

chore: trigger release workflow on push to feat/migrate-tailwind branch

289b523

chore: trigger release workflow on push to feat/migrate-tailwind branch

c485964

chore: minor style changes

437eb75

joseacabaneros marked this pull request as draft January 14, 2026 13:38

joseacabaneros changed the title ~~feat: migrate to tailwind 4~~ Temporary Tailwind4 migration for MotiveMarket Jan 14, 2026

feat(AiOverview): update component from main version

007a137

	return mapColorsFlat((color, colorName) => {
	return mapColors((color, colorName) => {

	export function mapColorsFlat<T extends CssStyleOptions>(
	export function mapColors<T extends CssStyleOptions>(

	export interface CSSRuleObject {
	[selector: string]: CSSRuleValue \| string \| number \| undefined
	}

	"@types/tailwindcss": "^3.1.0",
	"@types/tailwindcss": "3.1.0",

		@@ -0,0 +1,4 @@
		@import 'tailwindcss';

		@plugin "../../../src/x-tailwind-plugin/plugin";

Conversation

Turito commented Dec 19, 2025

Pull request template

Motivation and context

Type of change

What is the destination branch of this PR?

How has this been tested?

Checklist:

Uh oh!

victorcg88 Dec 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Turito Dec 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

victorcg88 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

victorcg88 Jan 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

victorcg88 Dec 19, 2025 •

edited

Loading

Turito Dec 19, 2025 •

edited

Loading

victorcg88 Jan 13, 2026 •

edited

Loading